<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            color: #b0b0b0be;     
            outline-style: none;
           
        }
    </style>
</head>

<body>
    <input type="text" value="邮箱/ID/手机号">
    <script>
        var text = document.querySelector('input');
        //注册事件 获得焦点事件 onfocus  
        text.onfocus = function () {
            if (text.value === '邮箱/ID/手机号') {
                text.value = '';
            }
            // 获得焦点需要把文本框边框里面的颜色变粉红色
            text.style.borderColor = '#ff80ff';
        }  
         //注册事件 获得焦点事件 onfocus  
           text.onblur=function(){
               if(text.value==='')
               {
                   text.value='邮箱/ID/手机号';
               }
               // 获得焦点需要把文本框边框里面的颜色变粉红色
               text.style.borderColor='#b0b0b0be';
           }
    </script>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }

        .box img {
            width: 60px;
            margin-top: 5px;
        }

        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        淘宝二维码
      <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
       var btn=document.querySelector('.box').querySelector('i');
       var box=document.querySelector('.box');
       btn.onclick=function(){
           box.style.display='none';
       }
    </script>
</body>

</html> -->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开关灯</title>
    <style>
      
    </style>
</head>

<body>
    <button>开关灯</button>
    <script>
        var btn = document.querySelector('button');
        var bodyEle = document.body;
        var flag=0;
        btn.onclick = function () {
            if(flag==0)
            {
                bodyEle.style.backgroundColor = 'black';
                flag=1;
            }
           else{
            bodyEle.style.backgroundColor = '#fff';
            flag=0;
           }
        }
    </script>
</body>

</html> -->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝二维码</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            position: relative;
            margin: 100px auto;
            width: 150px;
            border: 1px solid #cfcfcf;
        }

        #box h3 {
            text-align: center;
            font-size: 15px;
            color: #ff80c0;
        }

        #box img {
            text-align: center;
            margin: 8px 15px;
            width: 80%;
        }

        .x {
            position: absolute;
            top: 0px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #e8e8e8;
            text-align: center;
            line-height: 14px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="box">
        <h3>淘宝二维码</h3>
        <img src="images/tao.png" alt="">
        <div class="x">×</div>
    </div>
    <script>
        var btn = document.querySelector('.x'); 
        var box = document.querySelector('#box');
        console.log(box);
        btn.onclick = function () {
            box.style.display = 'none';
        }
    </script>
</body>

</html> -->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开关灯</title>
</head>

<body>
    <button>开关灯</button>
    <script>
        var btn = document.querySelector('button');
        var bodyE = document.body;
        var flag = 0;
        btn.onclick = function () {
            if (flag == 0) {
                bodyE.style.backgroundColor = 'black';
                flag = 1;
            } else {
             bodyE.style.backgroundColor='#fff';
             flag=0;
            }
        }
    </script>
</body>

</html> -->


 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            font-size: 15px;
            color: #c0c0c0;
           outline-style: none;
        }
    </style>
</head>
<body>
    <input type="text" value="邮箱/ID">
    <script>
        //1.获取元素
        var ipt=document.querySelector('input');
        ipt.onfocus=function(){
            if(ipt.value==='邮箱/ID')
            {
                ipt.value='';
              
            }
            ipt.style.borderColor = '#ff80ff';
        }
        //失去焦点
         ipt.onblur=function(){
            if(ipt.value==='')
            {
                ipt.value='邮箱/ID';
            }
            ipt.style.borderColor = 'green';
         }
    </script>
</body>
</html> 
   

